<template>
	<view class="report-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/carReportBg.png)'}]">
		<cu-custom :isBack="true" style="background-color: transparent;">
			<block slot="content">
				<view class="custom-title">核算报告</view>
			</block>
		</cu-custom>
		<view class="r-content">
			<view>{{score}}吨</view>
			<view class="text-center">
				<image src="https://txr001.zthj.net/static/img/hsjg.png" class="hsjg-img"></image>
			</view>
			<view class="result-content margin-top-32">碳排放结果</view>
			<view class="result">
				<view>
					<view class="name">碳排放总量</view>
					<view class="name padding-top-16">碳排放强度</view>
				</view>
				<view>
					<view class="desc">4000吨</view>
					<view class="desc padding-top-16 text-right">4</view>
				</view>
			</view>
			<view class="result-content">数据深度</view>
			<view class="result">
				<view>
					<view class="name">模型采集数据深度</view>
				</view>
				<view>
					<view class="desc">10</view>
				</view>
			</view>
			<view class="result-content">可靠性</view>
			<view style="padding: 32rpx 32rpx 48rpx;">
				<view class="cu-progress radius active">
					<view class="bg-5397F4" :style="[{ width:loading?'40%':''}]"></view>
					<view class="bg-A395FC" :style="[{ width:loading?'30%':''}]"></view>
					<view class="bg-77D5F8" :style="[{ width:loading?'30%':''}]"></view>
				</view>
				<view class="flex align-center justify-between padding-top">
					<view class="flex align-center">
						<view class="common bg-5397F4"></view>
						<view class="common-text">数据授权</view>
					</view>
					<view class="common-desc">40%</view>
				</view>
				<view class="flex align-center justify-between padding-top-sm">
					<view class="flex align-center">
						<view class="common bg-A395FC"></view>
						<view class="common-text">自主填报</view>
					</view>
					<view class="common-desc">30%</view>
				</view>
				<view class="flex align-center justify-between padding-top-sm">
					<view class="flex align-center">
						<view class="common bg-77D5F8"></view>
						<view class="common-text">三方填报</view>
					</view>
					<view class="common-desc">30%</view>
				</view>
			</view>
			<view class="result-content">范围</view>
			<view class="result" style="justify-content: flex-start;">
				<view class="fw-content margin-right-24">范围一</view>
				<view class="fw-content margin-right-24">范围二</view>
				<view class="fw-content">范围三</view>
			</view>
			<view class="result-content">标准及因子</view>
			<view class="result text-sm text-2B2F33">
				表明本次碳排放报告所依据的标准与使用的排放因子表明本次碳排放报告所依据的标准与使用的排放因子表明本次碳排放报告所依据的标准与使用的排放因子表明本次碳排放报告所依据的标准与使用的排放因子表明本次碳排放报告所依据的标准与使用的排放因子
			</view>
			<view class="result-content">核算模型来源</view>
			<view class="padding-left-32 padding-top-32">
				<view class="text-sm text-2B2F33">模型上传：某某企业</view>
				<view class="padding-top-sm text-sm text-2B2F33">上传时间：2023-09-06 12:30:12</view>
			</view>
			
		</view>
		<view class="margin-top-70 flex align-center justify-between padding-left-32 padding-right-32">
			<view @click="complateReport">
				<image src="https://txr001.zthj.net/static/img/wcbg.png" class="wcbg-img"></image>
			</view>
			<view @click="modalName='bottomModal'">
				<image src="https://txr001.zthj.net/static/img/rzbg.png" class="wcbg-img"></image>
			</view>
		</view>
		<image src="https://txr001.zthj.net/static/img/pdf.png" class="pdf-img"></image>
		
		
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/mxGmBg.png)'}]">
				<view class="padding-32">
					<view class="flex align-center justify-start padding-left-sm" >
						<view>
							<image src="https://txr001.zthj.net/static/img/nyhySm.png" class="nyhy-small-img"></image>
						</view>
						<view class="padding-left-24">
							<view class="cu-title">碳排放核算模型认证</view>
							<view class="cu-title-desc padding-top-8">某某某能源企业</view>
						</view>
					</view>
					<view class="lc-content">
						<view class="flex align-center justify-between padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">选择三方机构：：</text>
							</view>
							<view>
								<image src="https://txr001.zthj.net/static/img/right.png" class="img-32 margin-left-8"></image>
							</view>
						</view>
						<view class="flex align-center justify-between padding-top-32 padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">联系人：</text>
							</view>
							<view>
								<input class="text-right" placeholder="请输入联系人姓名" name="input"></input>
							</view>
						</view>
						<view class="flex align-center justify-between padding-top-32 padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">联系方式：</text>
							</view>
							<view>
								<input class="text-right" placeholder="请输入联系方式" name="input"></input>
							</view>
						</view>
					</view>
					
					<view class="lc-content">
						<view class="flex align-center justify-between padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">账户数据流量：</text>
							</view>
							<view>
								<text class="text-3333 text-sm text-img-center">10000</text>
								<image src="https://txr001.zthj.net/static/img/right.png" class="img-32 margin-left-8"></image>
							</view>
						</view>
						<view class="flex align-center justify-between padding-top-32 padding-bottom-32 solid-bottom">
							<view>
								<text class="text-3333 text-sm">报告认证价格：</text>
							</view>
							<view>
								<text class="text-24458E text-df">2280</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="bottom-conetnt" @click="pay">
					<button class="pay-btn cu-btn">立即支付(2280流量)</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				modalName: '',
				active: false,
				score:0
			};
		},
		onLoad: function(e) {
			if(e.score){
				this.score = e.score;
			}
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			complateReport(){
				uni.navigateTo({
					url:"/pages/carAccount/carModel"
				})
			},
			pay(){
			    // 充值把这段代码放开
				uni.showModal({
					title: '',
					content: '您的数据流量不足，是否立即充值？',
					confirmText: "去充值",//这块是确定按钮的文字
					confirmColor:'#24458E',//删除字体的颜色
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url:"/pages/carAccount/recharge"
							})
						}
					}
				});
			}
			
		}
	}
</script>
<style lang="less" scoped>
	.report-content{
		background-size: 100% 100%;
		width: 100%;
		height: 2438rpx;
		.r-content{
			// padding-top: 468rpx;
			margin: 348rpx 32rpx 0;
			width: 686rpx;
			height: 1584rpx;
			background: linear-gradient(180deg, #B6D4FF 0%, rgba(255,255,255,0) 100%);
			border-radius: 48rpx;
			border: 4rpx solid rgba(70,144,247,0.4);
			.hsjg-img{
				width: 350rpx;
				height: 72rpx;
			}
			.result-content{
				padding-left: 28rpx;
				width: 224rpx;
				// padding: 10rpx 56rpx 10rpx 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #5397F4;
				border-radius: 0 50rpx 50rpx 0;
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
			.result{
				padding: 32rpx 32rpx 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					font-size: 24rpx;
					font-weight: 500;
					color: #2B2F33;
				}
				.desc{
					font-size: 24rpx;
					font-weight: 400;
					color: #575E66;
				}
				.fw-content{
					width: 140rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: rgba(83, 151, 244, 0.1);
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #2B2F33;
				}
			}
		}
	}
	.wcbg-img{
		width: 358rpx;
		height: 132rpx;
	}
	.pdf-img{
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		right: 0rpx;
		top:1908rpx;
	}
	.bg-5397F4{
		background-color: #5397F4;
	}
	.bg-A395FC{
		background-color: #A395FC;
	}
	.bg-77D5F8{
		background-color: #77D5F8;
	}
	.common{
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
	}
	.common-text{
		padding-left: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #2B2F33;
	}
	.common-desc{
		font-size: 24rpx;
		font-weight: 400;
		color: #575E66;
	}
	.cu-dialog {
		height: 906rpx;
		border-radius: 48rpx 48rpx 0 0 !important;
		background-size: 100% 100%;
		width: 100%;
		text-align: left;
		// padding: 32rpx;
		overflow-y: scroll;
		.nyhy-small-img{
			width: 100rpx;
			height: 124rpx;
		}
		.cu-title{
			font-size: 32rpx;
			font-weight: 600;
			color: #222222;
		}
		.cu-title-desc{
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
		}
		.sel-num-content{
			margin-top: 28rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left-text{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.num-content{
				width: 82rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #F5F5F5;
				border-radius: 4rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				margin: 0 24rpx;
			}
		}
		.lc-content{
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx;
			.lc-title{
				padding-top: 24rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.lc-title-desc{
				padding-top: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}
			.cu-steps .cu-item:not([class*="text-"]) {
			    color: #24458E;
			}
		}
		.bottom-conetnt{
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0px -2px 0px 0px rgba(0,0,0,0.04);
			padding: 12rpx 32rpx 72rpx;
			.pay-btn{
				width: 100%;
				height: 82rpx;
				background: #00D282;
				border-radius: 49rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>